<template>
	<view>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true">
			<swiper-item v-for="(item, index) in 3" :key="'a1'+index" class="swiper-item">
				<image src="/static/imgs/menus1.jpg" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="goods-msg">
			<view class="title">商品名称商品名称商品名称商品名称商品名称</view>
			<view class="price">￥15.00<text>/斤</text></view>
			<view class="desc">
				商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述
			</view>
		</view>
		<view class="peisong">
			<text>配送</text> 现在购买，预计8月8日送达，由第三方物流配送
		</view>
		<view class="fuwu flex">
			<text>服务</text> 8小时内可退
		</view>
		<view class="tuijian">
			<view class="title">
				<text>为你推荐</text>
			</view>
			<view class="card-box flex">
				<view class="card-item" v-for="(item,index) in 6" :key="'a2'+index">
					<image src="/static/imgs/menus1.jpg" mode="aspectFill"></image>
					<view class="name">大白菜</view>
					<view class="flex-between">
						<view class="price">￥5.00/斤</view>
						<view class="iconfont iconAddwithcircleF"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="pingjia">
			<view class="title flex-between">
				<text>商品评价</text>
				<navigator url="/pages/index/commentList" hover-class="none" class="right flex">
					全部评价
					<view class="iconfont iconyoujiantou1"></view>
				</navigator>
			</view>
			<view class="list-box">
				<view class="list-item">
					<view class="top">
						<view class="left flex">
							<image src="/static/imgs/menus1.jpg" mode="aspectFill"></image>
							<view class="name">昵称</view>
							<view class="date">2020.07.05</view>
						</view>
					</view>
					<view class="content">
						评价内容评价内容评价内容评价内容评价内容评价内容
					</view>
				</view>
			</view>
		</view>
		<view class="xiangqing">
			<view class="title">
				<text>商品详情</text>
			</view>
			<view class="content">
				<image src="/static/imgs/menus1.jpg" mode="widthFix"></image>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer flex-between">
			<view class="card-item" @click="addUsual">
				<view class="iconfont iconicon-"></view>
				<view class="p">加常用</view>
			</view>
			<view class="card-item" @click="addCar">
				<view class="iconfont icongouwuchezhengpin"></view>
				<view class="p">购物车</view>
				<view class="num">3</view>
			</view>
			<view class="btn flex-center" @click="goConfirmOrder">立即购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 加常用
			addUsual(){
				console.log(111)
			},
			// 加入购物车
			addCar(){
				
			},
			// 立即购买
			goConfirmOrder(){
				uni.navigateTo({
					url:"/pages/index/confirmOrder"
				})
			}
		}
	}
</script>

<style lang="less">
	@main-color:#039702;
	page{
		background: #fff;
	}
	.swiper{
		text-align: center;
		height: 400rpx;
		.swiper-item{
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
		
	}
	.goods-msg{
		padding: 20rpx 30rpx;
		.title{
			font-size: 32rpx;
			font-weight: bold;
		}
		.price{
			font-size: 34rpx;
			color:red;
			font-weight: bold;
			padding: 10rpx 0;
			text{
				font-size: 24rpx;
				color:#999;
				font-weight: normal;
			}
		}
		.desc{
			padding: 20rpx;
			background: #f2f3f4;
			border-radius: 10rpx;
			font-size: 28rpx;
			color:#666;
		}
	}
	.peisong{
		padding: 20rpx 30rpx;
		border-top:20rpx solid #F2f3f4;
		border-bottom:20rpx solid #F2f3f4;
		font-size: 30rpx;
		text{
			font-weight: bold;
			margin-right: 15rpx;
		}
	}
	.fuwu{
		padding: 20rpx 30rpx;
		border-bottom:20rpx solid #F2f3f4;
		font-size: 30rpx;
		text{
			font-weight: bold;
			margin-right: 15rpx;
		}
	}
	.title{
		text{
			font-size: 32rpx;
			font-weight: bold;
		}
		.right{
			font-size: 30rpx;
			.iconfont{
				font-size: 30rpx;
			}
		}
	}
	.tuijian{
		padding:20rpx 30rpx;
		.card-box{
			flex-wrap: wrap;
			
		}
		.card-item{
			width: 220rpx;
			margin-right: 15rpx;
			margin-top: 30rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
			image{
				width: 100%;
				height:220rpx;
				border-radius: 10rpx;
			}
			.name{
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
			.price{
				font-size: 30rpx;
				font-weight: bold;
				color:red;
			}
			.iconfont{
				color:@main-color
			}
		}
	}
	.pingjia{
		padding:20rpx 30rpx;
		border-top:20rpx solid #F2f3f4;
		border-bottom:20rpx solid #F2f3f4;
		.list-box{
			margin-top: 30rpx;
			.list-item{
				margin-bottom: 30rpx;
				.top{
					image{
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
					.name{
						font-size: 32rpx;
						margin: 0 30rpx;
					}
					.date{
						font-size: 26rpx;
						color:#999;
					}
				}
				.content{
					font-size: 30rpx;
					line-height: 1.7;
					margin-top: 20rpx;
				}
			}
		}
	}
	.xiangqing{
		padding: 20rpx 0;
		border-bottom: 130rpx solid #f2f3f4;
		.title{
			padding: 0 30rpx;
		}
		.content{
			margin-top: 30rpx;
			image{
				width: 100vw;
				height:auto;
			}
		}
	}
	.footer{
		position: fixed;
		bottom:0;
		height: 100rpx;
		background: #fff;
		width: 100vw;
		padding: 0 30rpx;
		box-sizing: border-box;
		.card-item{
			text-align: center;
			position: relative;
			.iconfont{
				font-size: 45rpx;
				
			}
			.p{
				font-size: 22rpx;
				transform: scale(.8);
			}
			.num{
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				width: 34rpx;
				height: 34rpx;
				font-size: 22rpx;
				color:white;
				border-radius: 50%;
				background: #f00;
			}
		}
		.btn{
			width: 60%;
			font-size: 32rpx;
			height: 76rpx;
			background: @main-color;
			border-radius: 38rpx;
			color:#fff;
		}
	}
</style>
